<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>左栏</title>
		<style>
			*{
				font: 16px "微软雅黑";
				/* 去掉无序列表样式 针对一项列表项标记*/
				list-sty le-type: none;
/* 去掉无序列表样式 针对三项 ①列表项标记 list-style-type
                          ②列表项位置 list-style-position
						  ③列表项图片 list-style-image
					所有的效果，去掉样式
*/
				list-style: none;
				/* 去掉内外边距： ul li存在外边距 */
				margin: 0;
				padding: 0;
			}
			aside{
				width: 255px;
				height: 530px;
				background: #878787;
			}
			aside ul.ul_sidebar li{
				width: 235px;
				height: 50px;
				text-align: left;
				line-height: 50px;
				/* 挂靠点【固定】 使用相对定位*/
				position: relative;
				top: 15px;
			}
			aside ul.ul_sidebar li:hover{
				background: #ffaa00;
				
			}
			/*挂靠位【活动】 使用绝对定位。按照父级位置定位*/
			aside ul.ul_sidebar div.out{
				width: 400px;
				height: 530px;
				border: 1px solid red;
				/*绝对定位*/
				position: absolute;
				left: 255px;
				/* 默认隐藏 搞不定【jQuery】*/
				display: none;
			}
			
			/*新增样式  大于号间隙：右侧撑大*/
			aside ul.ul_sidebar li span{
				float: right;
				padding-right: 20px; 
			}
			/*新增样式  左栏左侧文字间隙：左侧撑大*/
			aside ul.ul_sidebar li{
				padding-left: 20px;
			}
			
		</style>
		<script src="js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<!-- html结构： 外层div .sidebar   
		     html结构标记：aside元素语义化元素，表示：左栏、侧边栏、广告
			             有利于SEO优化
			           通常代替div+id/class
			 
		                内层ul.ul_sidebar li*10
						 内容参照京东左栏第一个
		     css结构：内部引入方式
			         通配选择器--合理添加
					外层aside 235*460 背景色
					内层每个li加宽高 235*46 
					内层文本垂直居中对齐，文字：16px
					鼠标移动上去li，
					背景色改变 
		 -->
		 <aside>
			 <ul class="ul_sidebar">
				 <!-- 弹出框，模式：div+别名  -->
				<div class="out"></div>
			 	<li>手机 平板 电话卡<span>></span></li>
			 	<li>电视 盒子<span>></span></li>
			 	<li>路由器 智能硬件<span>></span></li>
			 	<li>移动电源 插线板<span>></span></li>
			 	<li>耳机 音箱<span>></span></li>
			 	<li>电池 存储卡<span>></span></li>
			 	<li>保护套 后盖<span>></span></li>
			 	<li>贴膜 其他配件<span>></span></li>
			 	<li>米兔 服装<span>></span></li>
			 	<li>箱包 其他周边<span>></span></li>
			 </ul>
		 </aside>
		 <script>
			 /*左栏实现  1.添加事件li加   2.添加切换效果  3.切换效果*/
			 $("header div#wrapper div.head_right ul li.li_right").hover(function(){
				 //弹出框  默认隐藏---显示
				 $("header div.head_right ul div.out1").css("display","block");
			 },function(){
				 $("header div.head_right ul div.out1").css("display","none");
			 });
		 </script>
	</body>
</html>

<!--   css 悬停效果  效果不能实现  不能切换
       jq 悬停效果事件源  hover   切换效果问题
		语法：$("选择器").hover(function(){1},function(){2})；
  -->